<!--海报管理组件  -->
<template>
  <!-- 文件上传 -->
  <el-upload
    class="upload-demo"
    drag
    action="/api/upload_poster"
    multiple
    name="file"
    :on-success="upload"
    :show-file-list="false"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">点击上传或拖入文件进行上传</div>
  </el-upload>

  <!-- 搜索模块 -->
  <el-card class="box-card" style="margin-top: 20px">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <div class="input" style="margin-top: 40px">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="文件名称">
            <el-input v-model="List.title" placeholder="文件名称" />
          </el-form-item>
        </el-form>
      </div>

      <div style="display: flex; justify-content: flex-end">
        <el-button type="primary" @click="get_fileList()">搜索</el-button>
        <el-button @click="reset()">重置</el-button>
      </div>
    </el-form>
  </el-card>

  <!-- 图片保存位置 -->

  <el-card class="box-card imgList" style="margin-top: 20px">
    <div class="imgList">
      <!-- 文件名字渲染 -->

      <el-card
        class="imgList-div"
        v-if="flag"
        v-for="(item, index) in List.fileList"
        :key="id"
      >
        <a-image :src="item.img" alt="" />
        <span class="imgList-title">{{ item.title }}</span>
        <p>上传于{{ item.date }}</p>
        <p>{{ item.fileName }}</p>
      </el-card>

      <el-card
        class="imgList-div"
        v-else
        v-for="(item, index) in List.titleList"
        :key="index"
      >
        <a-image :src="item.img" alt="" />
        <span class="imgList-title">{{ item.title }}</span>
        <p>上传于{{ item.date }}</p>
        <p>{{ item.fileName }}</p>
      </el-card>
    </div>
  </el-card>
  <!-- 图片保存位置结尾 -->

  <!-- http://localhost:7001/api/get_poster -->
</template>
<script>
import { defineComponent, reactive, onMounted } from 'vue'
import axios from 'axios'

export default defineComponent({
  setup() {
    const List = reactive({
      //图片数据
      fileList: [],
      //搜索数据
      //搜索数据
      title: '',
      titleList: [],
      //状态
      flag: true
    })

    //点击搜索
    const get_fileList = () => {
      //调用小皮里的数据库
      axios.get('http://localhost:7001/api/get_poster').then((res) => {
        List.titleList = res.data.data.filter((item) => {
          return item.fileName.includes(List.title)
          get_fileList()
        })

        List.fileList = res.data.data
      })
    }

    //当上传成功时候
    const upload = () => {
      //调用新的数据
      get_fileList()
    }

    //点击重置的时候
    const reset = () => {
      List.title = ''
      List.type = ''
      get_fileList()
    }

    //重新渲染数据
    onMounted(() => {
      get_fileList()
    })

    return {
      List,
      upload,
      reset,
      get_fileList
    }
  }
})
</script>

<style lang="scss">
.imgList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.imgList-div {
  width: 200px;
  display: flex;
  flex-wrap: wrap;
  margin: 20px;
}
.imgList-div img {
  width: 150px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;

  transition: all 0.2s linear;
}
.imgList-div img:hover {
  transform: scale(2);
  transition: all 0.2s linear;
}
.imgList-div p:nth-child(2) {
  /*第一步： 溢出隐藏 */
  overflow: hidden;
  /* 第二步：让文本不会换行， 在同一行继续 */
  white-space: nowrap;
  /* 第三步：用省略号来代表未显示完的文本 */
  text-overflow: ellipsis;
  /*第四步:设置宽度*/
  width: 100px;
  font-weight: 800;
}
</style>
